<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link rel="stylesheet" href="./tianqi.css"/>
    <script src="./ajax/js/jquery.js"></script>

    <script src="./tianqi.js"></script>


</head>
<body>

<div class="container">


    <div class="a">
      <h1><p id="cnty"></p></h1>
      <h2><p id="city"></p></h2>
        纬度 <a id="lat"></a>
        <p></p>
        经度 <a id="lon"></a>
      <p id="date1"></p>
        <h3>今天，实时：<a id="hour1"></a>℃
            <a id="cond0"></a></h3>
    </div>

    <div class="b">
      <img src="" alt=""/>
      <h1><a id="tmp1"></a>℃ ~ <a id="tmp2"></a>℃</h1>

      <p>
          <a id="cond1"></a> - <a id="cond2"></a>
      </p>
      <p id="wind1"></p>
    </div>



    <div class="c">
      <p id="date2"></p>
      <p>
          <a id="tmp3"></a>℃ ~ <a id="tmp4"></a>℃
      </p>
      <p>
          <a id="cond3"></a> - <a id="cond4"></a>
      </p>
      <p id="wind2"></p>
    </div>

    <div class="d">
      <p id="date3"></p>
      <p>
          <a id="tmp5"></a>℃ ~ <a id="tmp6"></a>℃
      </p>
      <p>
          <a id="cond5"></a> - <a id="cond6"></a>
      </p>
      <p id="wind3"></p>
    </div>

    <div class="e">
        <p id="date4"></p>
        <p>
            <a id="tmp7"></a>℃ ~ <a id="tmp8"></a>℃
        </p>
        <p>
            <a id="cond7"></a> - <a id="cond8"></a>
        </p>
        <p id="wind4"></p>
    </div>

    <div class="f">
        <p id="date5"></p>
        <p>
            <a id="tmp9"></a>℃ ~ <a id="tmp10"></a>℃
        </p>
        <p>
            <a id="cond9"></a> - <a id="cond10"></a>
        </p>
        <p id="wind5"></p>
    </div>

    <div class="g">
        <p id="date6"></p>
        <p>
            <a id="tmp11"></a>℃ ~ <a id="tmp12"></a>℃
        </p>
        <p>
            <a id="cond11"></a> - <a id="cond12"></a>
        </p>
        <p id="wind6"></p>
    </div>

    <div class="h">
        <p id="date7"></p>
        <p>
            <a id="tmp13"></a>℃ ~ <a id="tmp14"></a>℃
        </p>
        <p>
            <a id="cond13"></a> - <a id="cond14"></a>
        </p>
        <p id="wind7"></p>
    </div>
    </div>

    <div class="i">
        <canvas id="canvas" width="200" height="200"></canvas>
        <canvas id="p_canvas" width="200" height="200"></canvas>
    </div>
    <script type="text/javascript">
        //获取绘图对象
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var p_canvas = document.getElementById('p_canvas');
        var p_context = p_canvas.getContext('2d');

        var height=200,width=200;
        //画大圆
        context.beginPath();
        context.strokeStyle="#009999";
        context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true);
        context.stroke();
        context.closePath();
        //画中间点
        context.beginPath();
        context.fillStyle="#000";
        context.arc(width/2,height/2,3,0,Math.PI*2,true);
        context.fill();
        context.closePath();

        //画小刻度
        var angle = 0,radius = width/2 - 4;
        for(var i=0;i<60;i++){
            context.beginPath();
            context.strokeStyle="#000";
//确认刻度的起始点
            var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
            context.moveTo(x,y);
//这里是用来将刻度的另一点指向中心点，并给予正确的角度
//PI是180度，正确的角度就是 angle+180度，正好相反方向
            var temp_angle = Math.PI +angle;
            context.lineTo(x +3*Math.cos(temp_angle),y+3*Math.sin(temp_angle));
            context.stroke();
            context.closePath();
            angle+=6/180*Math.PI;
        }
        //大刻度
        angle = 0,radius = width/2 - 4;
        context.textBaseline = 'middle';
        context.textAlign = 'center';
        context.lineWidth = 2;
        for(var i=0;i<12;i++){
            var num = i+3>12? i+3-12:i+3 ;
            context.beginPath();
            context.strokeStyle="#FFD700";
            var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
            context.moveTo(x,y);
            var temp_angle = Math.PI +angle;
            context.lineTo(x +8*Math.cos(temp_angle),y+8*Math.sin(temp_angle));
            context.stroke();
            context.closePath();
//大刻度 文字
            context.fillText(num,x+16*Math.cos(temp_angle),y+16*Math.sin(temp_angle));
            angle+=30/180*Math.PI;
        }

        function Pointer(){
            var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3]];
            function drwePointer(type,angle){
                type = p_type[type];
                angle = angle*Math.PI*2 - 90/180*Math.PI;
                var length= type[1];
                p_context.beginPath();
                p_context.lineWidth = type[2];
                p_context.strokeStyle = type[0];
                p_context.moveTo(width/2,height/2);
                p_context.lineTo(width/2 + length*Math.cos(angle),height/2 + length*Math.sin(angle));
                p_context.stroke();
                p_context.closePath();

            }
            setInterval(function (){
                p_context.clearRect(0,0,height,width);
                var time = new Date();
                var h = time.getHours();
                var m = time.getMinutes();
                var s = time.getSeconds();
                h = h>12?h-12:h;
                h = h+m/60;
                h=h/12;
                m=m/60;
                s=s/60;
                drwePointer(0,s);
                drwePointer(1,m);
                drwePointer(2,h);
            },500);
        }
        var p = new Pointer();
    </script>




</body>
</html>